<template>
    <div>
        <el-form :model="childForm" label-width="70px" ref="addstuform"
                 size="mini">
            <div>合约期限</div>
            <el-radio-group v-model="childForm.contractType">
                <el-radio :label="1">按课时</el-radio>
            </el-radio-group>
            <div>合约信息</div>
            <el-row justify="space-between">
                <el-col :span="8">

                    <el-form-item label="课时数量">
                        <el-col :span="11">
                            <el-input type="number" size="mini" class="search-input" v-model="childForm.totalrecords"
                                      placeholder="必填"></el-input>
                        </el-col>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col :span="8">
                    <el-form-item label="课程单价">
                        <el-input    @click="initData" class="search-input" label="课程单价"
                                    v-model="childForm.singlecharge"
                                    placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="space-between">
                <el-col :span="8">
                    <el-form-item label="课程金额">
                        <el-input   @click="initData" class="search-input" label="课程金额"
                                    v-model="childForm.classcharge"
                                    placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col :span="8">
                    <el-form-item label="其他金额">
                        <el-input    @click="initData" class="search-input" label="其他金额"
                                    v-model="childForm.othercharge"
                                    placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div>折扣信息</div>
            <el-radio-group v-model="childForm.discounttype">
                <el-radio :label="1">直减</el-radio>
                <el-radio :label="2">折扣</el-radio>
            </el-radio-group>
            <el-row type="flex" justify="space-between" v-if="childForm.discounttype==2">
                <el-col :span="10">
                    <el-form-item label="折扣比例">
                        <el-input    type="number" class="search-input" label="折扣比例"
                                     v-model="childForm.discountrate"
                                     placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row type="flex" justify="space-between">
                <el-col :span="10">
                    <el-form-item label="优惠金额">
                        <el-input    @click="initData" class="search-input" label="已上课时"
                                     v-model="childForm.discount"
                                     placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col :span="10">
                    <el-form-item label="赠送课时">
                        <el-input    @click="initData" class="search-input" label="已上课时"
                                     v-model="childForm.giverecords"
                                     placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col :span="10">
                    <el-form-item label="备注">
                        <el-input  type="textarea"   @click="initData" class="search-input" label="备注"
                                     v-model="childForm.comments"
                                     placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">学员姓名:{{name}}</el-col>
                <el-col  :span="5">总金额:{{this.childForm.totalPrice}} 元</el-col>
                <el-col  :span="5">已优惠:{{this.childForm.discountPrice}} 元</el-col>
            </el-row>


        </el-form>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '@/components/headTop'
    import {addUser, getuserDetail, updateUser} from '@/api/getData'
    import {baseUrl, baseImgPath} from '@/config/env'
    import ElCol from "element-ui/packages/col/src/col";
    import ElRow from "element-ui/packages/row/src/row";
    import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";

    export default {
        computed: {
            ...mapGetters(['schoolList'])
        },
        props: {
            cancelName: {
                type: String,
                default: '取消',
            },
            okName: {
                type: String,
                default: '完成'
            }
        },
        data() {
            return {
                name:"张三",
                childForm: {
                    contractType: 1,
                    startTime: null,
                    sid:null,
                    discountType:null,
                    endTime: null,
                    totalRecord: null,
                    singlePrice: null,
                    totalPrice: 20.3,
                    otherPrice: null,
                    discountPrice:10.3,
                    finishRecord: null,
                },

            }
        },

        components: {
            ElInput,
            ElOption,
            ElButton,
            ElRow,
            ElCol,
            headTop,
        },
        mounted() {
        },
        watch: {},

        methods: {
            ...mapActions(['getSubjectList', 'getGiftList', 'getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            calDiscount(){
    if(this.discountType!=2)
    return;
    if(this.discountRate==null||this.singlePrice==null||this.totalrecords==null)
    return ;
    this.discount=this.singlePrice*this.totalrecords*discountRate;
},
calTotal(){
    if(this.singlePrice==null||this.totalrecords==null)
    return;
    this.totalPricee=this.singlePrice*this.totalrecords-this.discount;
},
            confirm: function () {
                this.$emit('childAddContract', this.childForm);
            },
            cancel: function () {
                this.$emit('cancel', this.childForm);
            }

        },


        created() {

        },
    }
</script>

<style lang="less">
    @import '../style/mixin';


</style>
